<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP7+MySQL5.6 简易报修系统 - 安装</title>
    <style>
        * {box-sizing: border-box;}
        body {font-family: "Microsoft YaHei", Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; color: #333;}
        .container {max-width: 800px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
        h1 {text-align: center; color: #3f51b5;}
        .step {margin: 20px 0; padding: 15px; border: 1px solid #e0e0e0; border-radius: 3px;}
        .step-title {font-weight: bold; margin-bottom: 10px; font-size: 18px;}
        .form-group {margin-bottom: 15px;}
        label {display: block; margin-bottom: 5px;}
        input[type="text"], input[type="password"] {width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 3px;}
        .btn {background: #3f51b5; color: white; border: none; padding: 10px 15px; border-radius: 3px; cursor: pointer;}
        .btn:hover {background: #2c3e94;}
        .env-check {margin: 15px 0;}
        .env-item {display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #eee;}
        .success {color: #4caf50;}
        .error {color: #f44336;}
        .warning {color: #ff9800;}
        #result {margin-top: 20px; display: none;}
        .progress {height: 20px; background: #e0e0e0; border-radius: 3px; margin: 20px 0;}
        .progress-bar {height: 100%; background: #4caf50; border-radius: 3px; width: 0; transition: width 0.3s;}
    </style>
</head>
<body>
    <!-- 本文件功能：系统安装 -->
    <!-- 版权声明：保留发行权和署名权 -->
    <!-- 作者信息：功能反馈:15058593138@qq.com(手机号同微信) -->
    <div class="container">
        <h1>PHP7+MySQL5.6 简易报修系统安装</h1>
        
        <div class="step">
            <div class="step-title">环境检测</div>
            <div class="env-check">
                <div class="env-item">
                    <span>PHP版本</span>
                    <span id="php-version" class="<?php echo version_compare(PHP_VERSION, '7.0.0', '>=') ? 'success' : 'error'; ?>">
                        <?php echo PHP_VERSION; echo version_compare(PHP_VERSION, '7.0.0', '>=') ? ' ✓' : ' ✗ (需要 PHP 7.0+)'; ?>
                    </span>
                </div>
                <div class="env-item">
                    <span>MySQLi扩展</span>
                    <span id="mysqli-ext" class="<?php echo extension_loaded('mysqli') ? 'success' : 'error'; ?>">
                        <?php echo extension_loaded('mysqli') ? '已安装 ✓' : '未安装 ✗'; ?>
                    </span>
                </div>
                <div class="env-item">
                    <span>GD扩展</span>
                    <span id="gd-ext" class="<?php echo extension_loaded('gd') ? 'success' : 'warning'; ?>">
                        <?php echo extension_loaded('gd') ? '已安装 ✓' : '未安装 (图片处理可能受限)'; ?>
                    </span>
                </div>
                <div class="env-item">
                    <span>目录写入权限</span>
                    <span id="dir-writable" class="<?php echo is_writable('./') ? 'success' : 'error'; ?>">
                        <?php echo is_writable('./') ? '可写 ✓' : '不可写 ✗'; ?>
                    </span>
                </div>
            </div>
        </div>
        
        <div class="step">
            <div class="step-title">数据库配置</div>
            <div class="form-group">
                <label for="db_host">数据库主机</label>
                <input type="text" id="db_host" value="localhost">
            </div>
            <div class="form-group">
                <label for="db_name">数据库名</label>
                <input type="text" id="db_name" value="repair_system">
            </div>
            <div class="form-group">
                <label for="db_user">数据库用户名</label>
                <input type="text" id="db_user" value="root">
            </div>
            <div class="form-group">
                <label for="db_pass">数据库密码</label>
                <input type="password" id="db_pass" value="">
            </div>
            <div class="form-group">
                <label for="db_prefix">数据表前缀（可选）</label>
                <input type="text" id="db_prefix" value="">
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" id="import_demo" checked> 导入演示数据
                </label>
            </div>
            <button class="btn" id="install-btn">开始安装</button>
        </div>
        
        <div id="result" class="step">
            <div class="step-title">安装进度</div>
            <div class="progress">
                <div class="progress-bar" id="progress"></div>
            </div>
            <div id="install-message"></div>
        </div>
    </div>
    
    <script>
        document.getElementById('install-btn').addEventListener('click', function() {
            // 显示结果区域
            document.getElementById('result').style.display = 'block';
            document.getElementById('install-message').innerHTML = '<p>正在连接数据库...</p>';
            document.getElementById('progress').style.width = '10%';
            
            // 获取表单数据
            var dbHost = document.getElementById('db_host').value;
            var dbName = document.getElementById('db_name').value;
            var dbUser = document.getElementById('db_user').value;
            var dbPass = document.getElementById('db_pass').value;
            var dbPrefix = document.getElementById('db_prefix').value;
            var importDemo = document.getElementById('import_demo').checked;
            
            // 发送AJAX请求
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'install_ajax.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 'success') {
                                document.getElementById('progress').style.width = '100%';
                                document.getElementById('install-message').innerHTML = 
                                    '<p class="success">安装成功！</p>' +
                                    '<p>系统管理员账号: admin</p>' +
                                    '<p>后勤管理员账号: houqin</p>' +
                                    '<p>学生测试账号: student</p>' +
                                    '<p>默认密码均为: 123456</p>' +
                                    '<p>调试正常后删除install开头文件和.sql格式文件</p>' +
                                    '<p><a href="index.php">点击进入系统</a></p>';
                            } else {
                                document.getElementById('progress').style.width = '50%';
                                document.getElementById('install-message').innerHTML = 
                                    '<p class="error">安装失败：' + response.message + '</p>';
                            }
                        } catch (e) {
                            document.getElementById('install-message').innerHTML = 
                                '<p class="error">安装失败：返回数据解析错误</p>' +
                                '<p>' + xhr.responseText + '</p>';
                        }
                    } else {
                        document.getElementById('install-message').innerHTML = 
                            '<p class="error">安装失败：服务器错误</p>';
                    }
                }
            };
            
            var data = 'db_host=' + encodeURIComponent(dbHost) +
                      '&db_name=' + encodeURIComponent(dbName) +
                      '&db_user=' + encodeURIComponent(dbUser) +
                      '&db_pass=' + encodeURIComponent(dbPass) +
                      '&db_prefix=' + encodeURIComponent(dbPrefix) +
                      '&import_demo=' + (importDemo ? '1' : '0');
            
            xhr.send(data);
            document.getElementById('progress').style.width = '30%';
            document.getElementById('install-message').innerHTML += '<p>正在创建数据表...</p>';
        });
    </script>
</body>
</html>
